<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Input, Nothing } from '@/components/common/index.js'
import Toast from '@/components/toast/index.js'
import commonModel from '@/http/modules/common.js'
import { enumStore } from '@/store/enum'
import { storeToRefs } from 'pinia'
import Utility from '@/utils/utility'
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)

const route = useRoute()
const router = useRouter()
const info = ref({})
const loading = ref(false)
const contractList = ref([])
const selectAmount = computed(() => {
  let num = 0
  contractList.value.map((item) => {
    num += +item.amount
  })
  return +num.toFixed(2)
})

onMounted(() => {
  console.log(route.query.type)
  getInfo()
})
// 获取入账信息
function getInfo() {
  commonModel
    .gatewayApi({
      bizContent: {
        token: sessionStorage.token,
        inSerialNo: route.params.id,
      },
      service: 'cb_trade_contract_rel',
      version: '1.0.0',
    })
    .then((res) => {
      if (res) {
        info.value = res
        //列表里填充输入金额字段 amount
        res.contractOrderList.map((item) => {
          item.amount = item.relAmount ? item.relAmount :''
        })
        contractList.value = res.contractOrderList
      }
    })
}

function handleCreate() {
  router.push('/contract/create')
}

function handleSubmit() {
  loading.value = true

  let orderRelList = []
  //关联有输入金额的列表
  contractList.value.map((item) => {
    if (item.amount && item.amount > 0) {
      orderRelList.push({
        contractOrderNo: item.contractOrderNo,
        relAmount: item.amount,
        relCurrency: info.value.relCurrency,
      })
    }
  })
  commonModel
    .gatewayApi({
      bizContent: {
        token: sessionStorage.token,
        inSerialNo: route.params.id, //入账流水
        totalRelAmount: info.value.relAmount, //关联总金额
        orderRelList: orderRelList, //关联合同列表
        source: sessionStorage.source || '',
      },
      service: 'cb_trade_incoming_rel_submit',
      version: '1.0.0',
    })
    .then((res) => {
      if (res) {
        Toast.open({
          title: '提交成功',
          showCancel: false,
          showClose: false,
          confirmFun: () => {
            Toast.close()
            router.replace(`/trade/enter/${info.value.inSerialNo}`)
          },
        })
      }
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
</script>

<template>
  <div class="connection-price">
    <div class="price">
      <p class="fm-d-blod">
        {{ $filters.formatMoney(info.relAmount) }}
        <span class="fz-16">{{ info.relCurrency }}</span>
      </p>
      <p class="fm-d-blod">
        {{ $filters.formatMoney(selectAmount) }}
        <span class="fz-16">{{ info.relCurrency }}</span>
      </p>
    </div>
    <div class="desc fz-12">
      <span>入账金额</span>
      <span>已选金额</span>
    </div>
    <div v-if="info.relAmount < selectAmount" class="tips fz-12">
      <i class="iconfont icon-gantanhaoicon"></i>
      关联金额不能超过入账金额
    </div>
  </div>
  <Nothing v-if="!contractList.length" />
  <div v-for="(item, index) in contractList" :key="index" class="contract">
    <div class="contract-base fz-14">
      <div class="contract-base-info">
        <p>
          合同编号: <span>{{ item.contractNo }}</span>
        </p>
        <p class="fz-12">
          <span>{{ item.declType === 'Y' ? '报关单' : '非报关单' }}</span>
          <span v-if="item.setExc === 'Y'">结汇</span>
        </p>
      </div>
      <span class="fz-14">{{
        item.whetherShip === 'Y' ? '已发货' : '未发货'
      }}</span>
    </div>
    <div class="contract-user">
      <div class="contract-user-name">
        <p>{{ item.buyerName }}</p>
        <span class="fz-14">
          <!-- 合同状态 -->
          <!-- {{item.declType === 'Y' ? '报关单' : '非报关单'}} -->
          {{
            Utility.getLabelByValue(
              enumDslInfo.ContractOrderStatus,
              item.contractStatus
            )
          }}
        </span>
      </div>
      <div class="contract-user-row fz-14">
        合同金额: {{ $filters.formatMoney(item.totalOrderAmount) }}
        {{ info.relCurrency }}
      </div>
      <div class="contract-user-row fz-14">
        可关联金额: {{ $filters.formatMoney(item.uncollectedAmount || '') }}
        {{ info.relCurrency }}
      </div>
      <div class="contract-user-row fz-14">
        {{ item.gmtCreate }}
      </div>
      <Input
        v-model:value="item.amount"
        type="number"
        point
        :max="item.uncollectedAmount"
        :right-text="info.relCurrency"
      />
    </div>
    <div v-if="item.contractStatus === 'Returned'" class="contract-btn fz-12">
      <p>
        <i class="iconfont icon-gantanhaoicon"></i>请更新合同信息后再关联该合同
      </p>
    </div>
  </div>
  <div class="placeholder-box"></div>
  <div class="bottom-fixed">
    <button class="create-order" @click="handleCreate">创建合同订单</button>
    <button
      :disabled="+info.relAmount !== +selectAmount || loading"
      class="submit-btn"
      @click="handleSubmit"
    >
      提交
    </button>
  </div>
</template>

<style scoped lang="scss">
.connection-price {
  padding: 0.1rem 0.24rem;
  background: #fff;

  

  .price {
    @include fh;

    p {
      flex: 1;
      font-size: 0.24rem;
    }
  }

  .desc {
    @include fh;

    span {
      flex: 1;
      color: #999999;
    }
  }

  .tips {
    @include fh;
    margin-top: 0.08rem;
    color: #f41d1d;

    i {
      margin-right: 0.03rem;
    }
  }
}

.contract {
  background: #fff;
  border-radius: 0.08rem;
  overflow: hidden;
  padding-bottom: 0.1rem;
  margin: 0.1rem 0.12rem;

  &-base {
    @include fh;
    justify-content: space-between;
    min-height: 0.64rem;
    padding: 0 0.12rem;
    background: linear-gradient(270deg, #eff4f8 0%, #dde5ec 100%);

    &-info {
      p:nth-of-type(1) {
        color: #748291;

        span {
          color: #222;
        }
      }

      p:nth-of-type(2) {
        @include fh;
        margin-top: 0.08rem;

        span {
          color: #fff;
          background: #a5b3c1;
          border-radius: 0.04rem;
          margin-right: 0.04rem;
          padding: 0 0.04rem;
        }
      }
    }
  }

  &-user {
    padding: 0.1rem 0.12rem 0;

    &-name {
      @include fh;
      justify-content: space-between;

      p {
        color: #222;
        max-width: 80%;
        word-wrap: break-word;
      }

      span {
        color: #faa64e;
      }
    }

    &-row {
      margin: 0.08rem 0;
      color: #999999;
    }
  }

  &-btn {
    @include wh(3.27rem, 0.4rem);
    @include fh;
    margin: 0 auto;

    span {
      color: #999;
      margin-right: auto;
    }

    p {
      color: #f41d1d;
      @include fh;
      margin-right: auto;

      i {
        margin-right: 0.02rem;
      }
    }
  }
}
.contract-base-info{
  word-wrap: break-word;
    max-width: 80%;
    overflow: hidden;
    display: inline-block;
}

.placeholder-box {
  height: 0.88rem;
}

.bottom-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  @include wh(100%, 0.88rem);
  @include fh;
  background: #fff;
  justify-content: space-between;
  padding: 0 0.2rem 0.2rem;

  button {
    @include wh(1.6rem, 0.48rem);
    border: none;
    border-radius: 0.24rem;
  }

  button:disabled {
    background: #ccc;
  }

  .create-order {
    color: #3f84f3;
    background: #eaf2ff;
  }

  .submit-btn {
    color: #fff;
    background: #3f84f3;
  }
}
</style>
